 
 
<template>
 
    <div class="qrBox">
      <!-- 模版中使用  logoSrc图片属性可以删掉  text属性不能去掉  二维码的生成主要依赖于text属性-->
      <vue-qr 
          ref="qrCodeRef"
          id="payQR" 
          v-if="codeText" 
          :text="codeText" 
          :size="248" 
          colorDark="#333666" 
          colorLight="#ffffff"
          :logoSrc="logoImg" 
          :callback="getImgInfo"
          >
      </vue-qr>
      <div class="qrText">
        <button @click="downloadQrCode">下载二维码</button>
        <button @click="getImgInfo">生成二维码</button>
      </div>
  
    </div>
  
  </template>
  
  <script setup>
  // npm install vue-qr -s
  import { ref } from 'vue';
  import vueQr from 'vue-qr/src/packages/vue-qr.vue' //引入vue-qr组件
  const codeText = ref("11111"); // 确保有默认值  //拿到生成二维码的数据后赋值给 codeText 
   
  const logoImg = ref("https://img0.baidu.com/it/u=1552106092,2626691830&fm=253&fmt=auto&app=120&f=JPEG?w=583&h=500");
  // 可以本地图片也可以网图也可以删掉图片
  // import tree from'@/assets/tree.jpg'
  // const logoImg = ref(tree);
  // const logoImg = ref('');
  
  const qrCodeRef = ref(null);
   
   // 下载二维码
  function downloadQrCode(row) {
    const iconUrl = qrCodeRef.value.$el.src; 
    const a = document.createElement("a"); //自定义a标签
    const event = new MouseEvent("click"); //自定义鼠标点击事件
    a.download = "活动二维码";
    a.href = iconUrl;
    a.dispatchEvent(event); //触发自定义事件
  }
  
  // 生成二维码
  
  function getImgInfo(tree) {
    const img = new Image();
    img.src = tree;
    img.onload = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
   
      const text = "要添加的文字"; //是否显示文本
   
      canvas.width = img.width;
      canvas.height = img.height;
   
      ctx.drawImage(img, 0, 0);
   
     // 设置轮廓颜色和宽度
      ctx.strokeStyle = "#000000";
      ctx.lineWidth = 3;
   
      // 绘制文字轮廓
      ctx.strokeText(
        text,
        canvas.width / 2 - ctx.measureText(text).width / 2,
        canvas.height / 1.6
      );
   
      ctx.font = "bold 10px"; // 设置字体大小和类型
      ctx.fillStyle = "white"; // 设置字体颜色
      ctx.fillText(
        text,
        canvas.width / 2 - ctx.measureText(text).width / 2,
        canvas.height / 1.6
      ); // 在图片中心添加文字
      
      // 更新二维码图片
      qrCodeRef.value.$el.src = canvas.toDataURL("image/png");   //ref获取
      //  document.getElementById("payQR").src = canvas.toDataURL("image/png"); //id获取
    };
  }
   
  
  
  
  </script>
  
  <style lang="scss" scoped>
  
  .qrBox {
    text-align: center;//水平居中
    margin-top: 20px;
  }
  .qrText {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
  }
  </style>